<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.thymeleaf.org/extras/dialect"
	  layout:decorate="layout/layout_register"
>
<head>
	<title>手机号码验证</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="../../static/asset/css/base.min.css" th:href="@{/asset/css/base.min.css}"/>
	<link rel="stylesheet" href="../../static/asset/css/common/front.css" th:href="@{/asset/css/common/front.css}"/>s
	<link rel="stylesheet" href="../../static/asset/css/front/register.css" th:href="@{/asset/css/front/register.css}"/>
</head>
<body>
<div layout:fragment="content" class="wrapper register-wrapper">
	<div class="register-container ">
		<div class="register-name text-center mb-5">手机号码验证</div>
		<form th:action="@{/mobile/validate}" method="post" class="form-horizontal register-form" th:object="${validateInfo}" role="form">
			<input hidden id="sendCode" name="sendCode" th:field="*{sendCode}">
			<input type="hidden" id="clientId" name="clientId" th:field="*{clientId}">
			<div class="form-group">
				<div class="input-group">
					<input type="text" id="mobile" name="mobile" class="form-control" placeholder="手机号码" th:field="*{mobile}"
						   maxlength="11" required data-msg-required="不能为空"
						   onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
					<span class="input-group-addon"><input type="button" id="btnSendCode" class="btn btn-block btn-primary" value="发送验证码"></span>
				</div>
				<div class="form-control-feedback text-danger" th:errors="*{mobile}"></div>
				<small class="form-text text-muted">请输入要验证的手机号码</small>
			</div>

			<div class="form-group">
				<div class="input-group">
					<input id="receivedCode" name="receivedCode" type="text" class="form-control" placeholder="随机验证码" th:field="*{receivedCode}"
						   required data-msg-required="不能为空">
					<span class="input-group-addon"><input type="submit" class="btn btn-block btn-primary" value="&nbsp;&nbsp;立即验证&nbsp;&nbsp;"></span>
				</div>
				<div class="form-control-feedback text-danger" th:errors="*{receivedCode}"></div>
				<small class="form-text text-muted">请输入手机接收到的验证码</small>
			</div>
		</form>
	</div>
</div>

<th:block layout:fragment="script">
	<script type="text/javascript" src="../../static/asset/js/base.min.js" th:src="@{/asset/js/base.min.js}"></script>
	<script type="text/javascript" src="../../static/asset/js/form.min.js" th:src="@{/asset/js/form.min.js}"></script>
	<script type="text/javascript" src="../../static/asset/js/app.js" th:src="@{/asset/js/app.js}"></script>

	<script th:inline="javascript">
		/*<![CDATA[*/

        var mobileReadOnly = /*[[${validateInfo.mobileReadOnly}]]*/ '';
        var maxCount = /*[[${validateInfo.sendInterval}]]*/ 60;
		var sendCodeUrl = /*[[@{/mobile/code}]]*/ './code';

        var timeoutHandle;
        var intervalHandle;

        $(function () {
            if (mobileReadOnly){
                $('#mobile').attr("readonly", "readonly");
            }else {
                $('#mobile').on('input', function (e) {
                    e.preventDefault();
                    var val = $('#mobile').val();
                    if (val.length === 11) {
                        $('#btnSendCode').removeAttr('disabled');
                    } else {
                        $('#btnSendCode').attr('disabled', 'disabled');
                    }
                });
                $('#mobile').trigger("input");
            }

            $('#btnSendCode').on('click', function(e){
				e.preventDefault();
				$('#mobile').attr('readonly', 'readonly');
				$('#btnSendCode').attr('disabled', 'disabled');
				timeoutHandle = setTimeout(sendCode, 10);
            });
        });

		function sendCode(){
		    var newValue = $('#mobile').val();
            $.ajax({
                type: 'POST',
                url: sendCodeUrl + "/" + newValue,
                success: function (result, textStatus, jqXHR) {
                    if (result.success) {
                        $('#sendCode').val(result.data.sendCode);
						//延迟下次点击的间隔时间。
                        intervalHandle = setInterval(delay, 1000);
                    }else{
                        $('#btnSendCode').removeAttr('disabled');
                        if (!mobileReadOnly){
                            $('#mobile').removeAttr('readonly');
						}
						App.alert(result.message);
                    }
                }
            });
            clearTimeout(timeoutHandle);
		}

		function delay(){
		    var curCount = maxCount;
            var val = $('#btnSendCode').val();
            var infoArr = val.split("(");
            if (infoArr.length > 1){
                curCount = parseInt(infoArr[1].replace(")", ""));
                curCount--;
			}
			if (curCount > 0) {
                $('#btnSendCode').val(infoArr[0] + "(" + curCount + ")");
            }else{
                $('#btnSendCode').val(infoArr[0]);
                $('#btnSendCode').removeAttr('disabled');
                if (!mobileReadOnly){
                    $('#mobile').removeAttr('readonly');
                }
                clearInterval(intervalHandle);
			}
		}

		/*]]>*/
	</script>

</th:block>
</body>
</html>
